<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="table">
  </div>
  <form action="">
    <div>
      <label for="">姓名</label>
      <input id="name" type="text">
    </div>
    <div>
      <label for="">年龄</label>
      <input id="age" type="number">
    </div>
    <div>
      <label for="">城市</label>
      <input id="city" type="text">
    </div>
    <button id="submit" type="button">提交</button>
  </form>
  <script src="./jquery.js"></script> 
  <script>
    $(document).ready(function(){ 
      let table = $("table")
      let headerRow = ("tr").append(
        $("<th>").text("名字"),
        $("<th>").text("年龄"),
        $("<th>").text("城市")
      );
      table.append(headerRow)
      let data = [
      {name: "张三",age:250,city:"北京"},
      {name: "张三强",age:251,city:"上海"},
      {name: "张三丰",age:252,city:"深圳"}
      ];
      data.forEach(function(item){
        let row = $("<tr>").append(
          $("td").text(item.name),
          $("td").text(item.age),
          $("td").text(item.city)
        );
        table.append(row)
      })
      $("#table"),append(table)
      $("#submit"),click(function(){
        let name = $("#name").val()
        if (name!=''){
          let row = $("<tr>").append(
            $("")
          )
        }
      }

    
    })

  </script>
  <style >
    body{
      display: flex;
    }

  </style>
</body>
</html>